import React from 'react';
import {useDraggable} from '@dnd-kit/core';

const styleBox = {
  display: 'inline-block',
  margin: 20,
  padding: '16px 30px',
  width: 100,
  cursor: 'move',
  border: '1px solid'
};

export function Draggable(props) {
  const {attributes, listeners, setNodeRef} = useDraggable({
    id: props.id,
    // disabled: props.id === 1,
    data: props.item,
    attributes: {
      tabIndex: props.index
    }
  });
  const style = {
    ...styleBox,
  };
  return (
    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {props.children}
    </div>
  );
}
